import { HStack, Image ,Button,Link,Text, Icon, Popover, PopoverBody, PopoverContent, PopoverTrigger, Flex, VStack} from '@chakra-ui/react'
import ColorModeSwitch from '@/components/ColorModeSwitch';
import SearchInput from '@/components/SearchInput';
import headerTitles from '@/assets/data/header-titles.json'
import {FC, ReactNode, useState} from "react";
import { useAppSelector ,useAppDispatch} from '@/hooks';
import { setCurrentNavIndex } from '@/store/modules/nav';
import { ChevronDownIcon } from '@chakra-ui/icons';

interface IProps {
    children?:ReactNode,
    onSearch: (searchText: string) => void;
}
const TitleItemWithIcon:FC<{children:ReactNode}> = ({children})=>{
    return (
        <Text 
            as="a" 
            pl={2}
            pr={2}
            cursor="pointer"
            lineHeight="68px"
            height="68px"
            whiteSpace="nowrap"
        >
            {children}
            <Icon as={ChevronDownIcon} />
        </Text>
    )
}
const TitleItem:FC<{children:ReactNode,href:string,fontWeight:string,bg:string,onClick:()=>void}> = ({children,href,fontWeight,bg,onClick})=>{
    return (
        <Text 
        as="a" 
        pl={2}
        pr={2}
        cursor="pointer"
        lineHeight="68px"
        height="68px"
        whiteSpace="nowrap"
        fontWeight={fontWeight}
        href={href}
        bg={bg}
        onClick={onClick}
        >{children}</Text>
    )
}
const AppHeader :FC<IProps>  = ( {children,onSearch})=> {

    const [isShowMore,setIsShowMore] = useState(false)
    const {currentNavIndex} = useAppSelector(state=>state.nav)
    const dispatch = useAppDispatch()
    return (
        <HStack     >
            <Image src="https://h5s.kuwo.cn/www/kw-www/img/logo.ce08bf7.png" alt="logo" width="170px"  />
            {headerTitles.map((item,index)=>{
                return (
                    item.title !== "更多" ? (
                        <TitleItem 
                            key={item.title}
                            href={item.link}  
                            fontWeight={currentNavIndex===index ? 'bold' : 'normal'}
                            bg={currentNavIndex===index ? 'yellow.300' : 'transparent'}
                            onClick={()=>dispatch(setCurrentNavIndex(index))}
                            >{item.title}</TitleItem>
                    ) : (
                        <Popover key={item.title} trigger="hover" offset={[0,-10]}>
                            <PopoverTrigger>
                                <HStack>
                                    <TitleItemWithIcon>更多</TitleItemWithIcon>
                                </HStack>
                            </PopoverTrigger>
                            <PopoverContent  w="170px" border="none" boxShadow="lg" >
                                <PopoverBody paddingInline="0px" p="0" m="0" >
                                    <VStack spacing={0} >
                                        {item.subLink?.map((subItem) => (
                                            <Text key={subItem.title} as="a" h="50px" 
                                            _hover={{bg:"yellow.300"}}
                                            w="100%"
                                            textAlign="center"
                                            lineHeight="50px" href={subItem.link}>{subItem.title}</Text>
                                        ))}
                                    </VStack>
                                </PopoverBody>
                            </PopoverContent>
                        </Popover>
                    )
                )
            })}

            <SearchInput onSearch={onSearch} />
            <ColorModeSwitch />
            <Text variant="plain" cursor="pointer"  whiteSpace="nowrap" fontSize="14px">登录/注册</Text>
        </HStack>
    )
}

export default AppHeader